import React, { Component } from 'react';
import picture from '../1.png'
import './Nightshop.scss';
import { withRouter } from 'react-router-dom'
import { index_goodlist } from '../utils/api'
import { Skeleton } from 'antd-mobile'
class Nightshop extends Component {
    constructor(props) {
        super(props)
        this.state = { goodlist: [] }
    }
    componentDidMount() {
        index_goodlist({ count: 9 }).then((res) => {
            console.log(res.data)
            this.setState({ goodlist: res.data.list })
        })
    }
    render() {
        return (
            <div>
                <div className="night">
                    <img src={picture} alt="" />
                </div>
                <div className='box'>
                    {
                        //请求返回商品列表前, 显示骨架屏
                        this.state.goodlist.length == 0 ?
                            <>
                                <Skeleton.Title animated />
                                <Skeleton.Paragraph lineCount={5} animated />
                            </> :
                            this.state.goodlist.map((item, index) => {
                                return (
                                    <div className="seckill" key={index} onClick={() => { this.props.history.push({ pathname: '/detail', state: { goodid: item.id } }) }}>
                                        <img src={item.pic} alt="" />
                                        <div className="text">
                                            <p className='name'>{item.brandEN}{item.name}</p>
                                            <div className="box1">
                                                {
                                                    item.activityTags.map((element, index) => {
                                                        return (
                                                            <span key={index}>{element}</span>
                                                        )
                                                    })
                                                }
                                            </div>

                                            <p className='dv2'> <span>{item.salesPrice.name}</span>:<span>{item.salesPrice.value}</span></p>
                                        </div>

                                    </div>
                                )
                            })

                    }
                </div>
            </div>
        );
    }
}

export default withRouter(Nightshop);